<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            /* vh viewport height视口的高度
            vw viewport width 视口的宽度*/
            width: 100vw;
            height: 100vh;
            background-color: red;
            /* 超出部分隐藏 */
            overflow: hidden;
            margin: 0;
        }
        /* 属性选择器 */
        [id]{
            width: 100%;
            height: 50%;
        }
        /* id选择器 */
        #box01{
            background-color: aquamarine;
        }
        #box02{
            background-color: bisque;
        }

        div:nth-child(3){
            background-color: pink;
        }
        div:nth-of-type(4){
            background-color: aqua;
        }
        :last-child{
            background-color: purple;
        }
        /* 导航栏 */
        .nav{
            position: fixed;
            right: 0;
            top: 0;
            background-color: black;
        }
        .nav a{
            height: 30px;
            line-height: 30px;
            text-align: center;
            width: 50px;
            color: white;
        }
        /* 当选中某一屏幕的时候,让对应的文字调整到50px */
        :target{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- a[href="#box$$"]{第$屏}*5 -->
    <!-- [id=box$$]{我是文字$}*5 -->
    <div id="box01">我是文字1</div>
    <div id="box02">我是文字2</div>
    <div id="box03">我是文字3</div>
    <div id="box04">我是文字4</div>
    <div id="box05">我是文字5</div>
    <div class="nav">
        <a href="#box01">第1屏</a>
        <a href="#box02">第2屏</a>
        <a href="#box03">第3屏</a>
        <a href="#box04">第4屏</a>
        <a href="#box05">第5屏</a>
    </div>
</body>
</html>